<template>
  <!-- 大屁股 -->
  <a-layout class="bigbox">
    <!-- 阳光开朗大男孩 -->
    <a-layout-header class="person_info">
      <div class="headpic">
        <img src="public/sunnyboy.jpg" alt="" class="sunnyboy" />
        <div class="camera">
          <i class="iconfont">&#xe612;</i>
        </div>
      </div>
      <!--  -->
      <div class="person_information">
        <div class="name">祖安说唱家 刘涌</div>

        <div class="introduce">
          <span class="intro1"><i class="iconfont">1</i>阳光开朗大男孩 </span>
          <span class="intro2"><i class="iconfont">2</i>宇宙最强工程师 </span>
          <span class="intro3"><i class="iconfont">3</i>位置：星际五组 </span>
        </div>
      </div>
    </a-layout-header>
    <a-layout>
      <!-- 小屁股 -->
      <a-layout-content class="person_item">
        <!-- 标题和查看更多 -->
        <div class="title">
          <i class="Ltitle">我的项目</i
          ><a href="#" class="moreitem">查看更多</a>
        </div>
        <!-- 我的项目1 -->
        <div class="Myitem">
          <div class="item1">
            <i class="text1">五组训练系统升级</i>
            <i class="text2">Five group training system</i>
            <!-- 项目内容 -->
            <div class="item_content">
              <a-avatar-group :size="26">
                <a-avatar :style="{ backgroundColor: '#7BC616' }">A</a-avatar>
                <a-avatar :style="{ backgroundColor: '#14C9C9' }">B</a-avatar>
                <a-avatar :style="{ backgroundColor: '#168CFF' }">C</a-avatar>
                <a-avatar :style="{ backgroundColor: '#FF7D00' }"
                  >Arco</a-avatar
                >
                <a-avatar :style="{ backgroundColor: '#FFC72E' }"
                  >Design</a-avatar
                >
                <span class="text3">等10人</span>
              </a-avatar-group>
            </div>
          </div>
          <!-- 2 -->
          <div class="item1">
            <i class="text1">五组训练系统升级</i>
            <i class="text2">Five group training system</i>
            <!-- 项目内容 -->
            <div class="item_content">
              <a-avatar-group :size="26">
                <a-avatar :style="{ backgroundColor: '#7BC616' }">A</a-avatar>
                <a-avatar :style="{ backgroundColor: '#14C9C9' }">B</a-avatar>
                <a-avatar :style="{ backgroundColor: '#168CFF' }">C</a-avatar>
                <a-avatar :style="{ backgroundColor: '#FF7D00' }"
                  >Arco</a-avatar
                >
                <a-avatar :style="{ backgroundColor: '#FFC72E' }"
                  >Design</a-avatar
                >
                <span class="text3">等10人</span>
              </a-avatar-group>
            </div>
          </div>
          <!-- 3 -->
          <div class="item1">
            <i class="text1">五组训练系统升级</i>
            <i class="text2">Five group training system</i>
            <!-- 项目内容 -->
            <div class="item_content">
              <a-avatar-group :size="26">
                <a-avatar :style="{ backgroundColor: '#7BC616' }">A</a-avatar>
                <a-avatar :style="{ backgroundColor: '#14C9C9' }">B</a-avatar>
                <a-avatar :style="{ backgroundColor: '#168CFF' }">C</a-avatar>
                <a-avatar :style="{ backgroundColor: '#FF7D00' }"
                  >Arco</a-avatar
                >
                <a-avatar :style="{ backgroundColor: '#FFC72E' }"
                  >Design</a-avatar
                >
                <span class="text3">等10人</span>
              </a-avatar-group>
            </div>
          </div>
          <!-- 4 -->
          <div class="item1">
            <i class="text1">五组训练系统升级</i>
            <i class="text2">Five group training system</i>
            <!-- 项目内容 -->
            <div class="item_content">
              <a-avatar-group :size="26">
                <a-avatar :style="{ backgroundColor: '#7BC616' }">A</a-avatar>
                <a-avatar :style="{ backgroundColor: '#14C9C9' }">B</a-avatar>
                <a-avatar :style="{ backgroundColor: '#168CFF' }">C</a-avatar>
                <a-avatar :style="{ backgroundColor: '#FF7D00' }"
                  >Arco</a-avatar
                >
                <a-avatar :style="{ backgroundColor: '#FFC72E' }"
                  >Design</a-avatar
                >
                <span class="text3">等10人</span>
              </a-avatar-group>
            </div>
          </div>
          <!-- 5 -->
          <div class="item1">
            <i class="text1">五组训练系统升级</i>
            <i class="text2">Five group training system</i>
            <!-- 项目内容 -->
            <div class="item_content">
              <a-avatar-group :size="26">
                <a-avatar :style="{ backgroundColor: '#7BC616' }">A</a-avatar>
                <a-avatar :style="{ backgroundColor: '#14C9C9' }">B</a-avatar>
                <a-avatar :style="{ backgroundColor: '#168CFF' }">C</a-avatar>
                <a-avatar :style="{ backgroundColor: '#FF7D00' }"
                  >Arco</a-avatar
                >
                <a-avatar :style="{ backgroundColor: '#FFC72E' }"
                  >Design</a-avatar
                >
                <span class="text3">等10人</span>
              </a-avatar-group>
            </div>
          </div>
          <!-- 6 -->
          <div class="item1">
            <i class="text1">五组训练系统升级</i>
            <i class="text2">Five group training system</i>
            <!-- 项目内容 -->
            <div class="item_content">
              <a-avatar-group :size="32">
                <a-avatar :style="{ backgroundColor: '#7BC616' }">A</a-avatar>
                <a-avatar :style="{ backgroundColor: '#14C9C9' }">B</a-avatar>
                <a-avatar :style="{ backgroundColor: '#168CFF' }">C</a-avatar>
                <a-avatar :style="{ backgroundColor: '#FF7D00' }"
                  >Arco</a-avatar
                >
                <a-avatar :style="{ backgroundColor: '#FFC72E' }"
                  >Design</a-avatar
                >
                <span class="text3">等10人</span>
              </a-avatar-group>
            </div>
          </div>
        </div>
      </a-layout-content>
      <!-- 小队 -->
      <a-layout-sider class="person_team" style="width: 350px">
        <div class="team_title">我的小队</div>
        <!-- 1队 -->
        <div class="team_list">
          <div class="team_pic">
            <img
              src="https://is2-ssl.mzstatic.com/image/thumb/Purple113/v4/f7/84/cb/f784cbcf-29e9-d772-a4fa-978800807e7a/source/1024x1024bb.jpg"
              alt=""
            />
          </div>
          <div class="team_fake">
            <div class="team_name">Apex的猎杀小队</div>
            <div class="team_people">共10人</div>
          </div>
        </div>
        <a-divider class="hr" />
        <!-- 2队 -->
        <div class="team_list">
          <div class="team_pic">
            <img
              src="https://is2-ssl.mzstatic.com/image/thumb/Purple113/v4/f7/84/cb/f784cbcf-29e9-d772-a4fa-978800807e7a/source/1024x1024bb.jpg"
              alt=""
            />
          </div>
          <div class="team_fake">
            <div class="team_name">皇族丶刘少的小队</div>
            <div class="team_people">共10人</div>
          </div>
        </div>
        <a-divider class="hr" />

        <!-- 3队 -->
        <div class="team_list">
          <div class="team_pic">
            <img
              src="https://is2-ssl.mzstatic.com/image/thumb/Purple113/v4/f7/84/cb/f784cbcf-29e9-d772-a4fa-978800807e7a/source/1024x1024bb.jpg"
              alt=""
            />
          </div>
          <div class="team_fake">
            <div class="team_name">嗜血狂少的小队</div>
            <div class="team_people">共10人</div>
          </div>
        </div>
        <a-divider class="hr" />

        <!-- 4队 -->
        <div class="team_list">
          <div class="team_pic">
            <img
              src="https://is2-ssl.mzstatic.com/image/thumb/Purple113/v4/f7/84/cb/f784cbcf-29e9-d772-a4fa-978800807e7a/source/1024x1024bb.jpg"
              alt=""
            />
          </div>
          <div class="team_fake">
            <div class="team_name">爷傲奈我何的小队</div>
            <div class="team_people">共10人</div>
          </div>
        </div>
      </a-layout-sider>
    </a-layout>
    <!-- 推送记录 -->
    <a-layout>
      <a-layout-content class="person_commit">
        <!-- 动态 -->
        <div class="protitle">
          <i class="pro_Ltitle">我的项目</i
          ><a href="#" class="pro_moreitem">查看全部</a>
        </div>
        <!-- 项目提交记录 -->
        <div class="divider-demo" style="margintop: 48px">
          <div class="flex-box">
            <span class="avatar">
              <img src="public/sunnyboy.jpg" alt="" />
            </span>
            <div class="content">
              <a-typography-title :heading="6"
                >阳光开朗大男孩发布了新项目</a-typography-title
              >
              五组训练系统升级
            </div>
          </div>
        </div>
        <a-divider class="half-divider" />
        <!-- 2 -->
        <div class="divider-demo" style="margintop: 48px">
          <div class="flex-box">
            <span class="avatar">
              <img src="public/sunnyboy.jpg" alt="" />
            </span>
            <div class="content">
              <a-typography-title :heading="6"
                >阳光开朗大男孩发布了新项目</a-typography-title
              >
              五组训练系统升级
            </div>
          </div>
        </div>
        <a-divider class="half-divider" />
        <!-- 3 -->
        <div class="divider-demo" style="margintop: 48px">
          <div class="flex-box">
            <span class="avatar">
              <img src="public/sunnyboy.jpg" alt="" />
            </span>
            <div class="content">
              <a-typography-title :heading="6"
                >阳光开朗大男孩发布了新项目</a-typography-title
              >
              五组训练系统升级
            </div>
          </div>
        </div>
        <a-divider class="half-divider" />
        <!-- 4 -->
        <div class="divider-demo" style="margintop: 48px">
          <div class="flex-box">
            <span class="avatar">
              <img src="public/sunnyboy.jpg" alt="" />
            </span>
            <div class="content">
              <a-typography-title :heading="6"
                >阳光开朗大男孩发布了新项目</a-typography-title
              >
              五组训练系统升级
            </div>
          </div>
        </div>
        <a-divider class="half-divider" />
        <!-- 5 -->
        <div class="divider-demo" style="margintop: 48px">
          <div class="flex-box">
            <span class="avatar">
              <img src="public/sunnyboy.jpg" alt="" />
            </span>
            <div class="content">
              <a-typography-title :heading="6"
                >阳光开朗大男孩发布了新项目</a-typography-title
              >
              五组训练系统升级
            </div>
          </div>
        </div>
        <a-divider class="half-divider" />
        <!-- 6 -->
        <div class="divider-demo" style="margintop: 48px">
          <div class="flex-box">
            <span class="avatar">
              <img src="public/sunnyboy.jpg" alt="" />
            </span>
            <div class="content">
              <a-typography-title :heading="6"
                >阳光开朗大男孩发布了新项目</a-typography-title
              >
              五组训练系统升级
            </div>
          </div>
        </div>
        <a-divider class="half-divider" />
        <!-- 7 -->
        <div class="divider-demo" style="margintop: 48px">
          <div class="flex-box">
            <span class="avatar">
              <img src="public/sunnyboy.jpg" alt="" />
            </span>
            <div class="content">
              <a-typography-title :heading="6"
                >阳光开朗大男孩发布了新项目</a-typography-title
              >
              五组训练系统升级
            </div>
          </div>
        </div>
        <a-divider class="half-divider" />
      </a-layout-content>
      <a-layout-sider class="person_mission" style="width: 350px">
        <div class="mission_title">小队任务</div>
        <div class="iconpic">
          <a-empty class="iconmission" />
        </div>
      </a-layout-sider>
    </a-layout>
    <!-- 小小屁股 -->
    <a-layout-footer>Footer</a-layout-footer>
  </a-layout>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>
<style scoped lang="scss">
.bigbox {
  height: 100%;
  // 头像
  .person_info {
    height: 220px;
    background: url(https://ts1.cn.mm.bing.net/th/id/R-C.26a53c9296c66296fa03ce48bd2acd8c?rik=BVCwac1eZyYmBA&riu=http%3a%2f%2fup.enterdesk.com%2fedpic_source%2f26%2fa5%2f3c%2f26a53c9296c66296fa03ce48bd2acd8c.jpg&ehk=C96W216h%2fDMBib4qdHR3vtQ%2b1jy50Xc%2fQzUsVNaTUTU%3d&risl=&pid=ImgRaw&r=0);
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .headpic {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }
    .headpic .sunnyboy {
      width: 70px;
      height: 70px;
      border-radius: 70px;
      cursor: pointer;
    }
    .camera {
      position: absolute;
      right: 0;
      top: 50px;
      border-radius: 16px;
      background: white;
      cursor: pointer;
      color: blue;
      line-height: 16px;
    }
  }
  // 个人信息介绍
  .person_information {
    width: 400px;
    height: 80px;
    // position: relative;
    box-sizing: border-box;
    text-align: center;
    line-height: 30px;
    .name {
      font-size: 16px;
    }
  }
  // 内容
  .person_item {
    height: 350px;
    margin-right: 15px;
    .Ltitle {
      color: black;
      font-style: normal;
      margin: 20px 10px 10px 15px;
    }
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .moreitem {
        text-decoration: none;
        color: blue;
        font-size: 14px;
        margin-right: 40px;
      }
    }
    .Myitem {
      box-sizing: border-box;
      height: 300px;
      display: flex;
      flex-flow: row wrap;
      justify-content: space-around;
      .item1 {
        // width: 384px;
        min-width: 30%;
        height: 128px;
        border: 1px solid #E5E6EB;
        display: flex;
        flex-direction: column;
        line-height: 35px;
        justify-content: flex-start;
        align-items: flex-start;
        padding-left: 8px;
        padding-right: 8px;
        .text1,
        .text2 {
          font-style: normal;
          color: #4e5969;
          font-size: 14px;
        }
      }
      .text3 {
        color: #4e5969;
      }
    }
  }
  // 小队信息
  .person_team {
    display: flex;
    justify-content: center;
    align-items: center;
    .team_title {
      width: 310px;
      height: 50px;
      line-height: 50px;
      font-size: 16px;
    }
    .team_list {
      width: 310px;
      height: 50px;
      display: flex;
      align-items: center;
    }
    .team_pic {
      margin-right: 15px;
    }
    .team_pic img {
      width: 40px;
      height: 40px;
      border-radius: 40px;
    }
    .team_fake {
      width: 150px;
      height: 46px;
      line-height: 20px;
    }
    .hr {
      margin-top: 10px;
    }
  }
  .person_commit {
    height: auto;
    margin: 15px 15px 0 0;
    box-sizing: border-box;
    width: 560px;
    padding: 24px;
    .half-divider {
      left: 55px;
      width: calc(100% - 55px);
      min-width: auto;      // margin: 16px 0;
    }
    .flex-box {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .flex-box .avatar {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      margin-right: 16px;
      color: var(--color-text-2);
      font-size: 16px;
      background-color: var(--color-fill-3);
      border-radius: 50%;
      img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
    }
    .flex-box .content {
      flex: 1;
      color: var(--color-text-2);
      font-size: 14px;
      line-height: 20px;
    }
  }
  // 小标题
  .protitle {
    display: flex;
    justify-content: space-between;
    box-sizing:border-box;
    .pro_Ltitle {
      font-style: normal;
      font-size: 18px;
      color: black;
      margin-bottom:45px;
    }
    .pro_moreitem {
      text-decoration: none;
      color: blue;
      cursor: pointer;
    }
  }
  // 任务队列
  .person_mission {
    height: 350px;
    margin-top: 15px;
    .mission_title {
      font-size: 18px;
      margin: 15px;
    }
    .iconpic {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      box-sizing: border-box;
      margin: 75px auto;
    }
  }
}
</style>
